<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 设置样式 */
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        div {
            width: 750px;
            margin: 0 auto;
        }

        ul {
            display: flex;
        }

        ul>li {
            width: 70px;
            height: 250px;
            overflow: hidden;
            transition: width .2s linear;
        }

        img {
            display: block;
            width: 400px;
            height: 250px;
        }

        ol {
            display: flex;
        }

        ol>li {
            width: 10px;
            height: 10px;
            margin: 10px;
            background-color: aquamarine;
        }

        ol>li:first-child {
            background-color: rebeccapurple;
        }

        ul li span {
            position: absolute;
            top: 20px;
        }
    </style>
</head>

<body>
    <div>
        <ul>

        </ul>
        <ol>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>

    </div>
    <script>
        var ul = document.querySelector('ul');
        // 1. 图片路径的前缀
        var str = "https://www.jq22.com/demo/jquerylbqh201910210040/images/0";
        // 4. 声明一个空字符串用来叠加 多个li标签
        var str1 = '';
        // 2. 循环创建多个li标签  带图的那个
        for (var i = 1; i <= 6; i++) {
            // 3. 拼接路径
            var url = str + i + ".png"
            // 5 叠加li
            str1 += `<li>
                    <span>0${i}</span>
                    <img src ="${url}" alt = 'tu'>
                    </li> `

        }
        // 6. 将创建的li添加给ul
        ul.innerHTML = str1;


        // 1. 获取需要点击的li标签
        var lis = document.querySelectorAll('ul>li');
        // 7. 获取下边所有的小方块
        var ollis = document.querySelectorAll('ol>li');
        // 2. 给第一个li设置初始样式
        lis[0].style.width = '400px';
        // 3. 循环得到每个li标签
        for (var i = 0; i < lis.length; i++) {
            lis[i].aaa = i;
            lis[i].onclick = function () {
                // 5. 排他思想 给所有样式都设置取消特殊样式
                for (var k = 0; k < lis.length; k++) {
                    // 5.1 设置取消样式
                    lis[k].style.width = "70px";
                    // 9. 获取带li的索引值
                    lis[k].style.backgroundColor = "aquamarine";
                    

                }
                // 11. 通过当前标签this 获取自定义属性aaa的值 记录当前标签的索引值
                console.log(this.aaa);
                // 12. 根据获取索引值找到相对相应位置的小方块li设置特殊样式
                ollis[this.aaa].style.backgroundColor = 'red';
                // 给当前标签添加特殊样式
                this.style.width = "400px";


            }
        }
    </script>
</body>

</html>